<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/jpetstore.css" type="text/css">

    <script type="text/javascript" th:src="@{https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js}" ></script>
<!--    <script type="text/javascript" src="/js/jquery-ui.min.js"></script>-->
<!--    <link type="text/css" href="/js/jquery-ui.min.css" rel="stylesheet">-->
    <script type="text/javascript" th:src="@{/js/register.js}"></script>
</head>
<body>

<!--头部引用-->
<div th:replace="/common/IncludeTop::header"></div>
<!--中间部分-->
<div id="Content">
    <div id="Catalog">
        <form action="/account/register" method="post" id="myForm">

            <fieldset>
                <legend>User Information</legend>

                <table>
                    <div class="must">
                        <tr>
                            <td>Username:</td>
                            <td><input  name="username" type="text" id="username" class="MustFill" placeholder="Username"></td>
                            <td><span id="inputName">Please enter your username</span></td>
                        </tr>
                    </div>
                    <div class="must">
                        <tr>
                            <td>New password:</td>
                            <td><input  name="password" type="password" id="password" class="MustFill" placeholder="Password"></td>
                            <td><span id="inputPassword">Please enter your password</span></td>
                        </tr>
                    </div>
                    <div class="must">
                        <tr>
                            <td>Repeat password:</td>
                            <td><input name="repeatedPassword" type="password" id="repeatedPassword" class="MustFill" placeholder="Repeat Password"></td>
                            <td><span id="inputRepeatPassword">Please repeat your password</span></td>
                        </tr>
                    </div>
                    <div class="must">
                        <tr>
                            <td>Identifying code:</td>
                            <td><input type="text" name="valistr" id="valistr" class="MustFill" placeholder="Identifying code" ></td>
                            <td><img id= "valiImage" src= "/account/creatValidString" width="" height="" alt="" /></td>
                        </tr>
                    </div>

                </table>
            </fieldset>

            <fieldset>
                <legend>Account Information</legend>
                <table>
                    <tbody>
                    <tr>
                        <td>First name:</td>
                        <td><input name="firstName" value="" type="text" placeholder="First name"></td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td><input name="lastName" value="" type="text" placeholder="Last name"></td>
                    </tr>
                    <tr>
                        <td>Email:</td>
                        <td><input name="email" type="text" placeholder="Email" id="email" class="MustFill"></td>
                        <td><span id="inputEmail">Please enter your email</span></td>
                    </tr>
                    <tr>
                        <td>Phone:</td>
                        <td><input name="phone" value="" type="text" placeholder="Phone"></td>
                    </tr>
                    <tr>
                        <td>Address 1:</td>
                        <td><input name="address1" value="" type="text" size="40" placeholder="Address 1"></td>
                    </tr>
                    <tr>
                        <td>Address 2:</td>
                        <td><input name="address2" value="" type="text" size="40" placeholder="Address 2"></td>
                    </tr>
                    <tr>
                        <td>City:</td>
                        <td><input name="city" value="" type="text" placeholder="City"></td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td><input name="state" value="" type="text" size="4" placeholder="State"></td>
                    </tr>
                    <tr>
                        <td>Zip:</td>
                        <td><input name="zip" value="" type="text" size="10" placeholder="Zip"></td>
                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td><input name="country" value="" type="text" size="15" placeholder="Country"></td>
                    </tr>
                    </tbody>
                </table>
            </fieldset>

            <fieldset>
                <legend>Profile Information</legend>
                <table>
                    <tbody>
                    <tr>
                        <td>Language Preference:</td>
                        <td><select name="languagePreference">
                            <option selected="selected" value="english">english</option>
                            <option value="japanese">japanese</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td>Favourite Category:</td>
                        <td><select name="favouriteCategoryId">
                            <option value="FISH">FISH</option>
                            <option selected="selected" value="DOGS">DOGS</option>
                            <option value="REPTILES">REPTILES</option>
                            <option value="CATS">CATS</option>
                            <option value="BIRDS">BIRDS</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td>Enable MyList</td>
                        <td><input name="listOption" value="listOption"
                                   type="checkbox" checked="checked"></td>
                    </tr>
                    <tr>
                        <td>Enable MyBanner</td>
                        <td><input name="bannerOption" value="bannerOption"
                                   type="checkbox" checked="checked"></td>
                    </tr>
                    </tbody>
                </table>
            </fieldset>

            <input name="register" value="register" type="submit">
        </form>
    </div>

</div>

<!--底部引用-->
<div th:replace="/common/IncludeBottom::footer"></div>


</body>
</html>